import React from 'react'
import { TabBar } from 'antd-mobile'
import {
  Routes,
  Route,
  useNavigate,
  useLocation,
  MemoryRouter as Router,
} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

import { observer, inject } from 'mobx-react';
import { Home, Todo, Message, Mine, Login } from './pages'

import './App.css'

const Bottom = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const { pathname } = location

  const setRouteActive = (value) => {
    navigate(value)
  }

  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/todo',
      title: '待办',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/message',
      title: '消息',
      icon: <MessageOutline />,
    },
    {
      key: '/mine',
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  return (
    <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
}

const App = (props) => {
  const { appStore } = props
  const { isLoginPage } = appStore

  return (
    <Router initialEntries={['/home']}>
      <div className='app'>
        <div className='body'>
          <Routes>
            <Route path='/home' element={<Home />} />
            <Route path='/todo' element={<Todo />} />
            <Route path='/message' element={<Message />} />
            <Route path='/mine' element={<Mine />} />
            <Route path='/login' element={<Login />} />
          </Routes>
        </div>
        {
          !isLoginPage && (
            <div className='bottom'>
              <Bottom />
            </div>
          )
        }
      </div>
    </Router>
  )
}

const AppWrap = inject((stores) => {
	return {
		appStore: stores.appStore
	}
})(observer(App))

export default AppWrap;